<template>
	<view class="user-item">
		<view :class="{avatar:true, savatar:size == 'mini'}">
			<image :src=" info.avatarUrl || '/static/imgs/usered.png'" mode=""></image>
		</view>
		<view class="user-item-content">
			<view class="uname" :style="{fontSize: size == 'normal' ? '13px':'12px' }">{{info.nickName || '--'}}</view>
			<view class="user-item-time">
				<text class="poptxt" :style="{fontSize: size == 'normal' ? '11px':'10px' }">{{txt}}</text>
				<text style="margin: -8rpx 8rpx;color: #424242;">·</text>
				<at-formattime :timetamp="info.createTime || ''" class="time"
					:style="{fontSize: size == 'normal' ? '11px':'10px' }"></at-formattime>
			</view>
		</view>
		<view class="btn-box">
			<slot name="info"></slot>
		</view>
	</view>
</template>

<script>
	import AtFormattime from '@/components/AtFormattime'
	export default {
		components: {
			AtFormattime
		},
		props: {
			status: String,
			type: String,
			info: Object,
			size: {
				type: String,
				default: 'normal'
			}
		},
		computed: {
			txt() {
				if (this.type === '1') {
					return '投递于'
				} else {
					return '发布于'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-item {
		position: relative;
		display: flex;

		// padding: 15rpx;
		.user-item-content {
			display: flex;
			flex-direction: column;

			.user-item-time {
				display: flex;
				margin-top: 3rpx;
			}
		}

		.avatar {
			width: 76rpx;
			height: 76rpx;
			border-radius: 43rpx;
			margin-right: 15rpx;
			background-color: #000;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.savatar {
			width: 66rpx;
			height: 66rpx;
			border-radius: 33rpx;
			margin-right: 15rpx;
			background-color: #000;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.uname {
			font-size: 13px;
		}

		.poptxt {
			color: #424242;
			font-size: 11px;
		}

		.time {
			font-size: 11px;
			color: #424242;
		}
		.btn-box {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 15rpx;
			font-size: 12px;
			color: #494949;
			border-radius: 30rpx;
			background-color: #f0f2f5;
		}

		.btn-box:hover {
			color: gray;
		}
	}
</style>
